<!--
  功能：部门树
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月22日 16:02:35
-->
<template>
  <div>
    <div class="search">
      <a-input-search v-model:value="search.name" placeholder="部门名称检索" enter-button @search="initTreeData" />
    </div>
    <a-tree :tree-data="treeData" v-model:checkedKeys="checkedKeys" :fieldNames="{children:'children', title:'name', key:'code' }" checkable checkStrictly show-icon autoExpandParent showLine blockNode v-if="treeData.length" defaultExpandAll @check="checkTree">
    </a-tree>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import {} from "vue-router";
import {} from "vuex";
import { tree } from "@/api/sysDeptApi";
export default defineComponent({
  name: "",
  props: {},
  emits: [],
  setup(props, context) {
    const search = {
      name: ""
    };
    const data = reactive({
      treeData: [],
      search,
      checkedKeys: []
    }); //里面写所有的响应式数据，像vue2中的data一样

    // 加载部门树数据
    let initTreeData = () => {
      data.checkedKeys = [];
      let params = {
        name: search.name
      };
      tree(params).then(resd => {
        data.treeData = resd;
      });
    };

    let checkTree = checkedKeys => {
      context.emit("check", checkedKeys.checked);
    };

    // 初始化渲染
    onMounted(() => {
      initTreeData();
    });
    return {
      ...toRefs(data),
      checkTree,
      initTreeData
    };
  },
  components: {}
});
</script>

<style scoped>
.search {
  margin-bottom: 10px;
}
</style>